<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

const oChart = ref<HTMLDivElement | null>(null);
onMounted(() => {
    const myChart = echarts.init(oChart.value);
    const option = {
        color: ["rgb(26, 211, 213)", "rgb(241, 247, 97)", "rgb(227, 172, 75)", "rgb(23, 92, 232)"],
        legend: { show: false },
        tooltip: { trigger: "item" },
        series: [
            {
                type: "pie",
                radius: ["60%", "70%"],
                avoidLabelOverlap: false,
                padAngle: 1,
                itemStyle: { borderRadius: 2 },
                label: {
                    show: false,
                    position: "center",
                },
                labelLine: { show: false },
                data: [
                    { value: 30, name: "黄瓜" },
                    { value: 25, name: "豇豆" },
                    { value: 20, name: "番茄" },
                    { value: 25, name: "菠菜" },
                ],
            },
        ],
    };
    option && myChart.setOption(option);
});
</script>

<template>
    <section>
        <h3>
            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-zhiwu"></use></svg>
            <b>种植比例</b>
            <span>Zhong Zhi Bi Li</span>
        </h3>
        <hr class="to-right" />
        <div class="content">
            <div class="left">
                <div class="bg">
                    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-zhiwu"></use></svg>
                </div>
                <div ref="oChart" class="chart"></div>
            </div>
            <ul>
                <li>
                    <i></i>
                    <span>黄瓜</span>
                    <b>30%</b>
                </li>
                <li>
                    <i></i>
                    <span>豇豆</span>
                    <b>25%</b>
                </li>
                <li>
                    <i></i>
                    <span>番茄</span>
                    <b>20%</b>
                </li>
                <li>
                    <i></i>
                    <span>菠菜</span>
                    <b>25%</b>
                </li>
            </ul>
        </div>
    </section>
</template>

<style lang="scss" scoped>
@use "../styles/section.scss";
section {
    .content {
        display: flex;
        .left {
            position: relative;
            flex: 1;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            .bg {
                width: 150px;
                height: 150px;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                background: radial-gradient(circle at 50% 50%, var(--darken-primary-color) 0%, var(--darken-primary-color-alpha));
                .icon {
                    color: var(--primary-color);
                    font-size: 62px;
                }
            }
            .chart {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        }
        ul {
            flex: 1;
            display: flex;
            flex-direction: column;
            row-gap: 4px;
            li {
                box-sizing: border-box;
                padding: 4px 20px;
                width: 100%;
                background: url("@/assets/images/hr-to-right.png") left bottom / 100% 2px no-repeat;
                display: flex;
                align-items: center;
                column-gap: 4px;
                i {
                    flex-shrink: 0;
                    width: 10px;
                    height: 10px;
                }
                span {
                    flex: 1;
                    color: var(--primary-color);
                    font-size: 14px;
                }
                b {
                    flex-shrink: 0;
                    color: var(--primary-color);
                    font-weight: normal;
                    font-size: 20px;
                }
                &:nth-child(1) i {
                    background-color: rgb(26, 211, 213);
                }
                &:nth-child(2) i {
                    background-color: rgb(241, 247, 97);
                }
                &:nth-child(3) i {
                    background-color: rgb(227, 172, 75);
                }
                &:nth-child(4) i {
                    background-color: rgb(23, 92, 232);
                }
            }
        }
    }
}
</style>
